<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>
<script>
// 1. 导入echarts  注意： echarts已经没有默认暴露内容
import Axios from "axios";
import * as echarts from "echarts";
// 导入配置
import radarData from "./radarData.js";
export default {
  // 页面渲染完毕事件
  mounted() {
    // 一定要在mounted里面去实例化echarts对象！因为这里才可以访问ref。DOM才挂载号
    // 2. 实例化一个echarts对象
    this.myEcharts = echarts.init(this.$refs.myDiv);
    // 3. 设置echarts数据配置  【绘制最基础的，里面是没有数据的！基础的图标样式】
    this.myEcharts.setOption(radarData);
    // 4. 请求数据
    this.initData();
  },
  methods: {
    // 获取雷达图的数据，重新渲染
    async initData() {
      // 请求数据
      let { data } = await Axios.get("/data.json");
      //   将服务端返回的数据放在基础数据里面  【将来这里肯定还要加工处理数据】
      radarData.series[0].data = data.data;
      //   重新绘制
      this.myEcharts.setOption(radarData);
    },
  },
};
</script>
<style>
.radar-echart {
  width: 600px;
  height: 400px;
}
</style>
